// 想要使用必须先引入 defineStore；
import { defineStore } from 'pinia';

// 第二个参数是选项，对象里面有三个属性，相比于vuex 少了一个 mutations.
export const useAppPinia = defineStore({
  id: 'useApp',
  state: () => {
    // 存放的就是模块的变量
    return {
      theme: 'light',
      device: 'desktop',
      menuWidth: 220,
      menu: true,
      hideMenu: false,
      menuCollapse: false,
      topMenu: false,
    };
  },
  actions: {
    updateSettings(partial) {
      this.$patch(partial);
    },
    // 可以通过actions 方法，改变 state 里面的值。
    // 要观察作用域范围
    toggleTheme(dark: boolean) {
      if (dark) {
        this.theme = 'dark';
        document.body.setAttribute('arco-theme', 'dark');
      } else {
        this.theme = 'light';
        document.body.removeAttribute('arco-theme');
      }
    },
    toggleDevice(device: string) {
      this.device = device;
    },
    toggleMenu(value: boolean) {
      this.hideMenu = value;
    },
  },
  persist: {
    //  固化插件
    enabled: true, // 开启存储
    strategies: [
      // 指定存储的位置以及存储的变量都有哪些，该属性可以不写，
      //在不写的情况下，默认存储到 sessionStorage 里面,默认存储 state 里面的所有数据。
      { storage: localStorage, paths: ['dataBox'] },
    ],
  },
});

export default useAppPinia;
